<!--
 * @Description  : 折线图、柱状图
 * @Autor        : 杜康
 * @Date         : 2023-04-17 10:48:26 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-04-22 15:14:00 +0800
-->
<template>
  <VCharts :option="options" :style="{ height: `${height}px`}" :autoresize="true" />
</template>

<script>
import { merge } from "lodash";
import { getChartColor } from "@/utils/utils.js";
import mixins from "./mixins";
export default {
  name: "LineBar",
  mixins: [mixins],
  props: {
    isTitle: {
      type: Boolean,
      default: true,
    },
    legendSite: {
      type: String,
      default: "left",
    },
  },
  methods: {
    /**
     * @description: 初始化
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-04 13:41:33 +0800
     */
    init() {
      this.handleBar();
    },
    /**
     * @description: 处理折线图
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-04 13:43:33 +0800
     */
    handleBar() {
      const { type, typeName, xData, xName, yData, yName, series, min, max, color } = this.data;
      const legendData = [];
      const seriesData = [];
      series.forEach((serie, sIndex) => {
        const { type, name, data } = serie;
        legendData.push(name);
        seriesData.push({
          name,
          type,
          data,
          color: getChartColor(sIndex),
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          barMaxWidth: 15,
        });
      });
      const config = {
        color,
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legendData,
          type: "scroll",
          orient: "horizontal",
          textStyle: {
            fontSize: 12,
            color: "#595959",
          },
        },
        grid: {
          left: "50",
          right: "24",
          bottom: "50",
          top: "40",
          containLabel: true,
        },
        xAxis: {
          name: xName,
          nameLocation: "middle", // 可配置
          nameGap: 40,
          nameTextStyle: {
            fontSize: 16,
          },
          type: "category",
          boundaryGap: true,
          data: xData,
        },
        yAxis: {
          name: yName,
          nameLocation: "middle",
          nameGap: 40,
          nameTextStyle: {
            fontSize: 16,
          },
          type: "value",
        },
        series: seriesData,
      };
      this.options = this.isTitle
        ? merge(config, {
            title: {
              // 可配置
              text: typeName,
              textStyle: {
                fontSize: 14,
              },
              left: "10",
            },
            legend: this.legendSite === "left" ? { left: "15%" } : { right: "24" },
          })
        : merge(config, {
            legend: this.legendSite === "left" ? { left: "40" } : { right: "24" },
          });
      // 强制刷新
      this.$forceUpdate();
    },
  },
};
</script>
